import React, { useState, useEffect } from "react";
import { Row, Col, Input, Button, message, Space, Upload, Spin } from "antd";
import { UploadOutlined, DownloadOutlined } from "@ant-design/icons";

import { _mgw3_dect } from "../../util/api";

const { TextArea } = Input;
const url = require("../../util/conUrl");
const config = require("../../util/base");

const upload_url = url.api + config.api.mgw3_upload;
const download_url = url.api + config.api.mgw3_download;

function Article() {
  const [articleContent, setArticleContent] = useState("");
  const [resultContent, setResultContent] = useState("");
  const [isShow, setIsShow] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  const up_props = {
    name: "file",
    action: upload_url,
    onChange(info) {
      console.log(info);
      if (info.file.status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === "done") {
        message.success(`${info.file.name} 上传成功`);
      } else if (info.file.status === "error") {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };

  useEffect(() => {}, []);
  const changeContent = (e) => {
    setArticleContent(e.target.value);
  };
  const onGenerate = () => {
    if (!articleContent) {
      message.info("内容不能为空");
    } else {
      setIsLoading(true);
      let dataProps = {};
      dataProps.text = articleContent;
      _mgw3_dect(dataProps)
        .then((res) => {
          if (res.status === 200 && res.data.code === 0) {
            // console.log(res.data.data);
            // setResultContent(res.data.data);
            setIsShow(true);
            setIsLoading(false);
            message.success("成功");
          }
        })
        .catch(() => {
          setIsLoading(false);
          message.error("服务器异常");
        });
    }
  };

  const downFile = () => {
    fetch(download_url, {
      method: "get",
      headers: new Headers({
        "Content-Type": "application/json",
      }),
      cache: "no-cache",
    })
      .then((response) => {
        response.blob().then((blob) => {
          const file_type = blob.type.split("/")[1];
          console.log(file_type);
          const objectUrl = window.URL.createObjectURL(blob);
          const aLink = document.createElement("a");
          document.body.appendChild(aLink);
          aLink.style.display = "none";
          aLink.href = objectUrl;
          aLink.download = "报告." + file_type; //改文件后缀
          aLink.click();
          document.body.removeChild(aLink);
        });
      })
      .catch((error) => {
        console.log(error);
      });
  };
  return (
    <div>
      <Spin tip="检测中..." spinning={isLoading}>
        <div style={{ margin: "16px 0" }}>
          <Row justify="start">
            <Col span={25}>
              <Space>
                <Button
                  size="large"
                  onClick={onGenerate}
                  type="primary"
                  shape="round"
                >
                  生成
                </Button>
                <Upload {...up_props}>
                  <Button size="large" shape="round" icon={<UploadOutlined />}>
                    上传文档
                  </Button>
                </Upload>
                {isShow ? (
                  <Button size="large" shape="round" onClick={downFile}>
                    <DownloadOutlined />
                    下载报告
                  </Button>
                ) : null}
              </Space>
            </Col>
            <Col span={2}></Col>
            <Col span={8}></Col>
          </Row>
        </div>
        {/* <div>
          <Row justify="space-between">
            <Col span={11} className="cardItem">
              <TextArea
                rows={35}
                placeholder="检测内容"
                value={articleContent}
                onChange={changeContent}
                allowClear={true}
              />
            </Col>
            <Col span={11} className="cardItem">
              <div style={{ fontSize: "15px", padding: "3px" }}>
                {resultContent}
              </div>
            </Col>
          </Row>
        </div> */}
      </Spin>
    </div>
  );
}

export default Article;
